<template>
  <div class = "todo-container"  v-if="$store.state.isLogin === true">
    <div class = "todo-wrap">
      <AddTodo  :addTodo="addTodo"/>
      <TodoTitle />
      <TodoList :todos="todos" :checkTodo='checkTodo' :delTodo='delTodo' :modifyTodo='modifyTodo'/>
      <TodoFinish :todos="todos" :checkAllTodo="checkAllTodo" :clearAllDone="clearAllDone" />
    </div>
    
  </div>
  <div v-else class = "todo-container">
      尚未登陆，请前往登陆<router-link to="/login">Login</router-link>
  </div>
</template>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// @ is an alias to /src
import FileSaver from 'file-saver'
import AddTodo from '@/components/AddTodo.vue'
import TodoList from '@/components/TodoList.vue'
import TodoFinish from '@/components/TodoFinish.vue'
import TodoTitle from '@/components/TodoTitle.vue'
import qs from 'qs'


import JsonTodos from '@/json/jsonTodos.json';

export default {
  name: 'HomeView',
  components: {
    AddTodo, TodoList, TodoFinish, TodoTitle
  },
  mounted: function(){
    this.$axios({
      method: 'POST',              /* 指明请求方式，可以是 get 或 post */
      url: '/loadTodo',      /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
      data: qs.stringify({        /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          uid:this.$store.state.user.username
      })
    })
    .then(result => {                  /* res 是 response 的缩写 */
      if (result.data.errno === 0) {      /* res.data 是后端返回的数据对象 */
        console.log(result.data.data.res);
        this.todos = result.data.data.res;
      }
      else
        alert("获取失败！");
    })
    .catch(err => {                 /* 请求若出现路由找不到等其它异常，则在终端输出错误信息 */
      console.log(err);
    })
  },
  methods:{
    loadTodo(){
      this.$axios({
        method: 'POST',              /* 指明请求方式，可以是 get 或 post */
        url: '/loadTodo',      /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: qs.stringify({        /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
            uid:this.$store.state.user.username
        })
      })
      .then(result => {                  /* res 是 response 的缩写 */
        if (result.data.errno === 0) {      /* res.data 是后端返回的数据对象 */
          console.log(result.data.data.res);
          this.todos = result.data.data.res;
        }
        else
          alert("获取失败！");
      })
      .catch(err => {                 /* 请求若出现路由找不到等其它异常，则在终端输出错误信息 */
        console.log(err);
      })
    },
    addTodo(todoObj){
      this.$axios({
        method: 'POST',              /* 指明请求方式，可以是 get 或 post */
        url: '/addTodo',      /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: qs.stringify({        /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
            uid:this.$store.state.user.username,
            title:todoObj.title
        })
      })
      .then(result => {                  /* res 是 response 的缩写 */
        if (result.data.errno === 0) {      /* res.data 是后端返回的数据对象 */          
          location. reload();
        }
        else
          alert("获取失败！");
      })
      .catch(err => {                 /* 请求若出现路由找不到等其它异常，则在终端输出错误信息 */
        console.log(err);
      })
    },
    delTodo(id){
      this.$axios({
        method: 'POST',              /* 指明请求方式，可以是 get 或 post */
        url: '/delTodo',      /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: qs.stringify({        /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
            id:id
        })
      })
      .then(result => {                  /* res 是 response 的缩写 */
        if (result.data.errno === 0) {      /* res.data 是后端返回的数据对象 */          
          location. reload();
        }
        else
          alert("删除失败！");
      })
      .catch(err => {                 /* 请求若出现路由找不到等其它异常，则在终端输出错误信息 */
        console.log(err);
      })
    },
    clearAllDone(){
      this.todos.forEach((todo)=>{
        if(todo.isDone == 1)
          this.delTodo(todo.id);
      })
    },
    modifyTodo(id,isDone,dateEnd){
      this.$axios({
        method: 'POST',              /* 指明请求方式，可以是 get 或 post */
        url: '/updateTodo',      /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: qs.stringify({        /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          id:id,
          date_end:dateEnd,
          isDone:isDone
        })
      })
      .then(result => {                  /* res 是 response 的缩写 */
        if (result.data.errno === 0) {      /* res.data 是后端返回的数据对象 */          
          
        }
        else
          alert("更新失败！");
      })
      .catch(err => {                 /* 请求若出现路由找不到等其它异常，则在终端输出错误信息 */
        console.log(err);
      })
    },
    checkAllTodo(done){
      this.todos.forEach((todo)=>{
        todo.isDone = done?1:0
      })
      this.$axios({
        method: 'POST',              /* 指明请求方式，可以是 get 或 post */
        url: '/checkAllTodo',      /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: qs.stringify({        /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          uid:this.$store.state.user.username,
          isDone:done?1:0
        })
      })
      .then(result => {                  /* res 是 response 的缩写 */
        if (result.data.errno === 0) {      /* res.data 是后端返回的数据对象 */          
          
        }
        else
          alert("更新失败！");
      })
      .catch(err => {                 /* 请求若出现路由找不到等其它异常，则在终端输出错误信息 */
        console.log(err);
      })
      // this.modifyTodo(todo.id, todo.isDone, todo.date_end)
    }
    
  },
  data(){
    return{
      // todos:[
      //   {id:'0001', title:'切勿删除', isDone:true, operated:1, dateBegin:null, dateEnd:null}
      // ],
      todos: []
    }
  },
}


</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

body{
  background: #fff;
}

.btn{
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  border-radius: 4px;
}

.btn-danger{
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover{
  color: #fff;
  background-color: #bd362f;
}

.btn:focus{
  outline: none;
}

.todo-container{
  position:relative;
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap{
  padding: 10px;
  border: 1px solid #ddd;
}
</style>
